<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="images/icons/favicon.png"/>
        <title>vacayhome</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="fonts/antonio-exotic/stylesheet.css" rel="stylesheet">
        <link rel="stylesheet" href="css/lightbox.min.css">
        <link href="css/responsive.css" rel="stylesheet">
		
		<link href="css/indexbox.css" rel="stylesheet">
		
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <!-- <script src="js/bootstrap.min.js" type="text/javascript"></script> -->
        <script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
        <script src="js/instafeed.min.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>

        <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
        <!-- Bootstrap CSS-->
        <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">

        <script th:inline="javascript">
            $(document).ready(function(){
                $("#user_image").click(function () {
                    $("#pic_img").click();
                });

                $("#pic_img").change(function () {
                    var formdata=new FormData();
                    formdata.append('pic_img',$('#pic_img').get(0).files[0]);
                    $.ajax({
                        async: false,
                        type: 'POST',
                        url: "/upload_pic",
                        dataType: 'json',
                        data: formdata,
                        contentType:false,//ajax上传图片需要添加
                        processData:false,//ajax上传图片需要添加
                        success: function (data) {
                            alert(data);
                            location.reload();
                        },
                        error: function (e) {
                            location.reload();
                        }
                    });
                });


            });

            //查看没有付款的
            function checkUnpaid() {
                $.ajax({
                    url: '/checkUnpaid',
                    type: 'POST',
                    data: {
                        user_id: [[${user.user_id}]]
                    },
                    success: function (data) {
                        var orders = data;
                        var content = "";
                        if (orders.length != 0) {
                            content += "<div class=\"collapse\" id=\"collapse_unpaid"+"\">\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "                                        <table class=\"table table-hover table-borderless\">\n" +
                                "                                            <thead>\n" +
                                "                                            <tr>\n" +
                                "                                                <th> # </th>\n" +
                                "                                                <th>订单号</th>\n" +
                                "                                                <th>下单日期</th>\n" +
                                "                                                <th>下单方式</th>\n" +
                                "                                                <th>总价格</th>\n" +
                                "                                            </tr>\n" +
                                "                                            </thead>\n" +
                                "                                            <tbody>\n"
                            for (var i = 0; i < orders.length; i++) {
                                var pojo = orders[i];
                                var pay_way;
                                if(pojo.pay_way == 0 ) {
                                    pay_way = "线上支付"
                                } else if(pojo.pay_way == 1) {
                                    pay_way = "线下支付"
                                } else {
                                    pay_way = "电子钱包支付"
                                }
                                content +=                                 "                                            <tr>\n" +
                                    "                                                <th>" + (i + 1) + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ pojo.order_num + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ pojo.order_time +"</th>\n" +
                                    "                                                <th class=\"h5\">" + pay_way + "</th>\n" +
                                    "                                                <th class=\"h5\">" + pojo.total_price + "</th>\n" +
                                    "                                            </tr>\n";
                            }
                            content += "                                            </tbody>\n" +
                                "                                        </table>\n" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        } else {
                            content += "<div class=\"collapse\" id=\'collapse_unpaid\'>\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "您没有未支付的订单" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        }
                        $("#collapse_area").html(content);
                        $('#collapse_unpaid').collapse();
                    }
                });
            }

            // 查看没有使用的
            function checkUnused() {
                $.ajax({
                    url: '/checkUnused',
                    type: 'POST',
                    data: {
                        user_id: [[${user.user_id}]]
                    },
                    success: function (data) {
                        var orders = data;
                        var content = "";
                        var roomType = orders.room_type_id
                        if (orders.length != 0) {
                            content += "<div class=\"collapse\" id=\"collapse_unused"+"\">\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "                                        <table class=\"table table-hover table-borderless\">\n" +
                                "                                            <thead>\n" +
                                "                                            <tr>\n" +
                                "                                                <th> # </th>\n" +
                                "                                                <th>订单项号</th>\n" +
                                "                                                <th>房间类型</th>\n" +
                                "                                                <th>预计入住时间</th>\n" +
                                "                                                <th>预定退房时间</th>\n" +
                                "                                            </tr>\n" +
                                "                                            </thead>\n" +
                                "                                            <tbody>\n"

                            for (var i = 0; i < orders.length; i++) {
                                var pojo = orders[i];
                                var roomTypeName = "";

                                $.ajax({
                                    url: '/findRoomTypeName',
                                    async:false,
                                    type: 'POST',
                                    data: {
                                        room_type_id: pojo.room_type_id
                                    },
                                    success: function (data) {
                                        roomTypeName = data;
                                    }
                                });

                                content +=                                 "                                            <tr>\n" +
                                    "                                                <th>" + (i + 1) + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ pojo.order_item_id + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ roomTypeName +"</th>\n" +
                                    "                                                <th class=\"h5\">" + pojo.plan_stay_time + "</th>\n" +
                                    "                                                <th class=\"h5\">" + pojo.plan_leave_time + "</th>\n" +
                                    "                                            </tr>\n";
                            }
                            content += "                                            </tbody>\n" +
                                "                                        </table>\n" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        } else {
                            content += "<div class=\"collapse\" id=\'collapse_unused\'>\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "您没有未使用的订单项" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        }
                        $("#collapse_area").html(content);
                        $('#collapse_unused').collapse();
                    }
                });
            }

            // 查看已完成的
            function checkComplete() {
                $.ajax({
                    url: '/checkComplete',
                    type: 'POST',
                    data: {
                        user_id: [[${user.user_id}]]
                    },
                    success: function (data) {
                        var orders = data;
                        var content = "";
                        var roomType = orders.room_type_id
                        if (null != orders && "" != orders) {
                            content += "<div class=\"collapse\" id=\"collapse_complete"+"\">\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "                                        <table class=\"table table-hover table-borderless\">\n" +
                                "                                            <thead>\n" +
                                "                                            <tr>\n" +
                                "                                                <th> # </th>\n" +
                                "                                                <th>订单项号</th>\n" +
                                "                                                <th>房间类型</th>\n" +
                                "                                                <th>预计入住时间</th>\n" +
                                "                                                <th>预定退房时间</th>\n" +
                                "                                            </tr>\n" +
                                "                                            </thead>\n" +
                                "                                            <tbody>\n"
                            for (var i = 0; i < orders.length; i++) {
                                var pojo = orders[i];
                                var roomTypeName = "";
                                $.ajax({
                                    url: '/findRoomTypeName',
                                    type: 'POST',
                                    data: {
                                        room_type_id: pojo.room_type_id
                                    },
                                    success: function (data) {
                                        roomTypeName = data;
                                    }
                                });
                                content +=                                 "                                            <tr>\n" +
                                    "                                                <th>" + (i + 1) + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ pojo.order_item_id + "</th>\n" +
                                    "                                                <th class=\"h5\">"+ roomTypeName +"</th>\n" +
                                    "                                                <th class=\"h5\">" + pojo.plan_stay_time + "</th>\n" +
                                    "                                                <th class=\"h5\">" + pojo.plan_leave_time + "</th>\n" +
                                    "                                            </tr>\n";
                            }
                            content += "                                            </tbody>\n" +
                                "                                        </table>\n" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        } else {
                            content += "<div class=\"collapse\" id=\'collapse_complete\'>\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "您没有已完成的订单项" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        }
                        $("#collapse_area").html(content);
                        $('#collapse_complete').collapse();
                    }
                });
            }

            // 查看待评价的
            function checkUnrated() {
                var content = "";
                $.ajax({
                    url: '/order/common',
                    type: 'POST',
                    data: {},
                    success: function (data) {
                        if (null != data && "" != data) {
                             content = "<div class=\"collapse\" id=\"collapse_unrated"+"\">\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "                                        <table class=\"table table-hover table-borderless\">\n" +
                                "<thead>\n" +
                                "                                    <tr>\n" +
                                "                                        <th> 编号</th>\n" +
                                "                                        <th>入住房间类型</th>\n" +
                                "                                        <th>下单时间</th>\n" +
                                "                                        <th>入住时间</th>\n" +
                                "                                        <th>离开时间</th>\n" +
                                "                                        <th>评价</th>\n" +
                                "                                    </tr>\n" +
                                "                                    </thead>"
                            for (var i = 0; i < data.length; i++) {
                                var po = data[i];
                                var id = po.order_item_id;
                                var name = po.room_type_name
                                var ordertime = po.order_time
                                var check_in = po.check_in_time
                                var check_out = po.check_out_time
                                content += " <tbody>\n" +
                                    "                                    <tr id='" + id + "'>\n" +
                                    "                                        <th>" + id + "</th>\n" +
                                    "                                        <th class=\"h5\">" + name + "</th>\n" +
                                    "                                        <th class=\"h5\">" + ordertime + "</th>\n" +
                                    "                                        <th class=\"h5\">" + check_in + "</th>\n" +
                                    "                                        <th class=\"h5\">" + check_out + "</th>\n" +
                                    "                                        <th><input type=\"button\" onclick='common(" + id + "," + po.room_type_id + ")' value=\"评价\"></th>\n" +
                                    "                                    </tr>\n" +
                                    "                                    </tbody>"

                            }

                            content += "                                        </table>\n" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        } else {
                            content += "<div class=\"collapse\" id=\'collapse_complete\'>\n" +
                                "                            <div class=\"card card-body\">\n" +
                                "                                <div class=\"item d-flex align-items-center\">\n" +
                                "您没有待评价的订单项" +
                                "                                </div>\n" +
                                "                            </div>"  +
                                "                            </div>"
                        }
                        $("#collapse_area").html(content)
                        $("#collapse_unrated").collapse()
                    }
                });
            }

            //充值
            function addMoney() {
                var userid = $("#userid").val()
                var userwallet = $("#userwallet").val()
                var money = prompt("请输入充值金额")
                if(money==null){

                }else if(money==""){
                    alert("请输入正确金额")
                }else {
                    //跳转支付宝进行充值
                    location.href="/addMoney/pay?total_amount="+money+"&userid="+userid+"&userwallet="+userwallet;
                }

            }
        </script>
    </head>
    <body>
    <input type="hidden" id="userid" th:value="${user1.user_id}">
    <input type="hidden" id="userwallet" th:value="${user1.user_wallet}">
        <div id="page">
            <!---header top---->
            <div class="top-header" th:if="${#session}!=null">
                <div th:if="${#session.getAttribute('username') eq null} "><span th:include="front_header_top::html"></span></div>
                <div th:if="${#session.getAttribute('username') ne null} "><span th:include="front_header_top_login::html"></span></div>
            </div>
            <div class="top-header" th:if="${#session}==null">
                <span th:include="front_header_top::html"></span>
            </div>
            <!--header--->
            <div id="space"></div>
            <header class="header-container">
                <div class="container">
                    <div class="top-row">
                        <div class="row">
                            <div class="col-md-2 col-sm-6 col-xs-6">
                                <div id="logo">
                                    <!--<a href="index.html"><img src="images/logo.png" alt="logo"></a>-->
                                    <a href="/indexs"><span>云廊</span>酒店</a>
                                </div>
                            </div>
                            <div class="col-sm-6 visible-sm">
                                <div class="text-right" style="border:1px solid red;">
                                    <button type="button" class="book-now-btn">Book Now</button>
                                </div>
                                px
                            </div>
                            <div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
                                <nav class="navbar navbar-default">
                                    <div class="navbar-header page-scroll">
                                        <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle"
                                                type="button">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>

                                    </div>
                                    <div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
                                        <ul class="list-unstyled nav1 cl-effect-10">
                                            <li><a data-hover="首页" href="/indexs"><span>首页</span></a></li>
                                            <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                                            <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                                            <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                                            <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                                            <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                                            <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                                        </ul>

                                    </div>
                                </nav>
                            </div>
                            <div class="col-md-2  col-sm-4 col-xs-12 hidden-sm">
                                <div class="text-right"><a href="/rooms">
                                    <button type="button" class="book-now-btn">立即预订</button>
                                </a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>



            <div class="container-fluid">
                <div class="row justify-content-md-center">
                    <div class="articles card">
                        <div class="card-body">
                            <div class="col-lg-12">
                                <div class="col-lg-6" style="height: 100px;">
                                    <img class="rounded-circle user-img btn" id="user_image"
                                         th:src="@{images/user_images/{filename}(filename=${user1.user_image})}"
                                         alt="User image"
                                         style="height: 100px;">
                                    <form enctype="multipart/form-data" id="uploadForm" method="post">
                                    <input id="pic_img" name="pic_img"
                                           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file"
                                           style="display: none"/>
                                    </form>
                                </div>
                            <div class="col-lg-6">
                                <h4 class=" text-center" style="line-height: 100px" th:text="${user1.user_account}">John Doe</h4>
                            </div>
                            </div>

                    <div class="col-lg-6">
                        <div class="text">
                            <span style="line-height: 50px" class="text-center">钱包余额:¥&nbsp;&nbsp;</span><span
                                style="line-height: 50px" th:text="${user1.user_wallet}">20000</span><br>
                            <span style="line-height: 50px" class="text-center">会员等级：&nbsp;&nbsp;</span><span
                                style="line-height: 50px" th:text="${user_level.getLevel_name()}">黄金会员</span>
                        </div>
                    </div>

                            <div class="col-lg-6">
                                <div class="text">
                                <a href="javascript:void (0)" style="line-height: 50px" class="text-center" onclick="addMoney()">充值</a><br>
                                    <span style="line-height: 50px" class="text-center">距下个等级：&nbsp;&nbsp;</span><span style="line-height: 50px" th:text="${user1.user_credit}">2000 </span> / <span th:text="${user_level.getLevel_max_credit()}"> 5000 </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <p class="text-center" style="margin-top: 1rem;">
                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="checkUnpaid()">
                                未付款
                            </button>

                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="checkUnused()">
                                未使用
                            </button>

                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="checkComplete()">
                                已完成
                            </button>

                            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="checkUnrated()">
                                待评价
                            </button>

                        </p>
                    </div>
                    <div class="col-lg-8" id="collapse_area">
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <div class="item d-flex align-items-center">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>

            <!---footer--->
            <footer>
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-xs-12 width-set-50">
                            <div class="footer-details">
                                <h4>联系方式</h4>
                                <ul class="list-unstyled footer-contact-list">
                                    <li>
                                        <i class="fa fa-map-marker fa-lg"></i>
                                        <p>中国海南省三亚市海棠湾海棠北路701号</p>
                                    </li>
                                    <li>
                                        <i class="fa fa-phone fa-lg"></i>
                                        <p><a href="tel:+1-202-555-0100"> +1-202-555-0100</a></p>
                                    </li>
                                    <li>
                                        <i class="fa fa-envelope-o fa-lg"></i>
                                        <p><a href="mailto:demo@info.com"> demo@info.com</a></p>
                                    </li>
                                </ul>
                                <div class="footer-social-icon">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-instagram"></i></a>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                    <a href="#"><i class="fa fa-youtube-play"></i></a>
                                </div>
                                <div class="input-group" id="subscribe">
                                    <input type="text" class="form-control subscribe-box" value="" name="subscribe"
                                           placeholder="EMAIL ID">
                                    <span class="input-group-btn">
		                            <button type="button" class="btn subscribe-button"><i
                                            class="fa fa-paper-plane fa-lg"></i></button>
		                        </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12 width-50 width-set-50">
                            <div class="footer-details">
                                <h4>浏览</h4>
                                <ul class="list-unstyled footer-links">
                                    <li><a data-hover="首页" href="/index"><span>首页</span></a></li>
                                    <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                                    <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                                    <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                                    <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                                    <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                                    <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="footer-details">
                                <h4>Now On Instagram</h4>
                                <div class="row">
                                    <div class="instagram-images">
                                        <div id="instafeed"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="copyright">
                        &copy; 2017 All right reserved. Designed by <a href="#" target="_blank">ThemeVault.</a>
                    </div>

                </div>
            </footer>


            <!--back to top--->
            <a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
                <span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
                <span>Top</span>
            </a>

        </div>
    </body>
</html>
